<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center px-5">
    <div
      class="btn-group-vertical d-flex justify-content-center p-0"
      role="group"
      [attr.aria-label]="'accessories.control.mode_control' | translate"
    >
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(1, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode === 1, 'fa-blank': targetMode !== 1 }"></i>
        </div>
        {{ 'accessories.control.locked' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(0, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode === 0, 'fa-blank': targetMode !== 0 }"></i>
        </div>
        {{ 'accessories.control.unlocked' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
    </div>

    @if (serviceManagement) {
    <h6 class="mt-4">
      {{ 'accessories.control.lock_auto' | translate }}: {{ targetLockManagementAutoSecurityTimeout.value === 0 ?
      '&infin;' : (targetLockManagementAutoSecurityTimeout.value | duration) }}
    </h6>
    <nouislider
      [min]="targetLockManagementAutoSecurityTimeout.min"
      [max]="targetLockManagementAutoSecurityTimeout.max"
      [step]="10"
      [(ngModel)]="targetLockManagementAutoSecurityTimeout.value"
      (ngModelChange)="onLockManagementAutoSecurityTimeoutStateChange()"
    />
    }
  </div>
  <div class="modal-footer"></div>
</div>
